<template>
  <el-card shadow="never" class="statement_table_box">
    <div class="title_box">
      <div> 邀请记录 </div>
      <el-button @click="onExport" :disabled="!tableData.length">导出</el-button>
    </div>
    <el-table :data="tableData" stripe>
      <el-table-column label="群聊信息" min-width="100">
        <template #default="scope">
          <div class="cust">
            <el-avatar shape="square" :size="36" :src="scope.row.avatar" />
            <span style="margin-left: 6px"> {{ scope.row.name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="建群时间" min-width="100" />
      <el-table-column prop="sum" label="进群人次" min-width="100" />
      <el-table-column prop="itemprop" label="详情" width="140">
        <template #default="scope">
          <el-button @click="toCustDetail(scope.row.id)" size="small">详情</el-button>
        </template>
      </el-table-column>
      <template #empty>
        <div class="empty">
          <img class="empty_img" src="@/assets/noData.png" alt="" />
          <div>暂无数据</div>
        </div>
      </template>
    </el-table>
    <Pagination ref="PaginationRef" @submit="onPage" />
  </el-card>
</template>

<script setup lang="ts">
  import Pagination from '@/components/Pagination.vue'
  import { useRouter } from 'vue-router'
  import { ref, defineEmits, defineExpose } from 'vue'
  const emit = defineEmits(['submit'])
  const router = useRouter()
  const PaginationRef = ref<any>(null)
  const tableData = ref<any>([])
  const onPage = (v: any) => {
    emit('submit', 'get', v)
  }
  // 导出数据
  const onExport = () => {
    emit('submit', 'export')
  }
  const handleData = (v: any) => {
    console.log(v, 'list')
    tableData.value = v.data
    PaginationRef.value.total = v.total
  }
  const toCustDetail = (id: any) => {
    router.push(`/customer/groupManage/list/detail?id=${id}`)
  }
  defineExpose({
    handleData
  })
</script>

<style scoped lang="scss">
  .empty {
    margin: 100px 0;
    .empty_img {
      transform: translateX(13%);
    }
  }
  .cust {
    display: flex;
    align-items: center;
  }
  .statement_table_box {
    :deep(.el-card__body) {
      padding-top: 10px;
      .title_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10px;
        border-bottom: 1px solid #eaeaea;
        margin-bottom: 24px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #35383a;
      }

      .user_box {
        display: grid;
        grid-template-columns: 50px 1fr;
        justify-content: center;
        grid-gap: 5px;

        .user_img {
          width: 40px;
          height: 40px;
        }

        .user_name {
          line-height: 40px;
        }
      }
    }
  }

  .total_no {
    text-align: center;
  }
  .avatar {
    width: 40px;
    height: 40px;
  }
</style>
